<template>
  <div>
    <div style="padding: 1px 0">
      <el-input style="width: 200px; font-size: medium" prefix-icon="el-icon-present" placeholder="请输入活动简介" v-model="name">
      </el-input>
      <el-button
        class="ml-5"
        type="primary"
        @click="load"
        style="font-size: medium"
        ><span style="font-size:18px;">搜索</span></el-button
      >
      <el-button
        class="ml-5"
        type="info"
        @click="reset"
        style="font-size: medium; margin-left:-3px"
        ><span style="font-size:18px;">重置</span></el-button
      >
    </div>

    <div style="padding: 5px 0; margin-left: 880px; margin-top:-20px">
      <el-button
        class="el-icon-circle-plus-outline"
        type="warning"
        @click="handleAdd"
        style="font-size: medium"
        ><span style="font-size:20px;">添加</span></el-button
      >
      <el-popconfirm
        class="ml-5"
        confirm-button-text="确定"
        cancel-button-text="我再想想"
        icon="el-icon-info"
        icon-color="red"
        title="您确定要批量删除吗?"
        @confirm="handleDeleteBatch"
      >
        <el-button type="danger" slot="reference" style="font-size: medium"
          ><span style="font-size:20px;">批量删除</span></el-button
        >
      </el-popconfirm>
      <el-button
        class="ml-5"
        type="primary"
        @click="exp"
        style="font-size: medium"
        ><span style="font-size:20px;">导出</span></el-button
      >
    </div>

    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-class-name="'headerBg77'"
      @selection-change="handleSelectionChange"
      style="font-size: large"
      :height="Height"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="explains" label="活动说明" width="170" align="center">
          <template v-slot="scope">
             <div><span style="font-size:20px; font-weight:600">{{ scope.row.explains }}</span></div>
          </template>
      </el-table-column>
      <el-table-column type="number" prop="beginTime" label="开始时间" width="210" align="center">
        <template v-slot="scope">
          {{ scope.row.beginTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="210"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createUser"
        label="创建人"
        width="110"
        align="center"
      ></el-table-column>
      <el-table-column label="开启/关闭" width="110" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动折扣" width="110" align="center">
        <template v-slot="scope">
          <el-tag type="warning" size="medium"><span style="font-weight:700; font-size:17px;">{{ scope.row.proportion }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="206" align="center">
        <template slot-scope="scope">
          <el-button type="success" @click="handleEdit(scope.row)"
            ><span style="font-size: 15px"
              >编辑 <i class="el-icon-edit"></i></span
          ></el-button>

          <el-popconfirm
            class="ml-5"
            confirm-button-text="确定删除"
            cancel-button-text="我再想想"
            icon="el-icon-info"
            icon-color="red"
            title="您确定要删除吗?"
            @confirm="handleDel(scope.row.id)"
          >
            <el-button type="danger" slot="reference"
              ><span style="font-size: 15px"
                >删除 <i class="el-icon-remove-outline"></i></span
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0; margin-left:300px;">
      <el-pagination
        style="margin-top: 20px; padding-bottom:5px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[9, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

      <el-dialog title="活动信息" :visible.sync="dialogFormVisible" width="55%" style="margin-top:-50px">
        <el-form label-width="90px" size="medium">
          <el-form-item label="活动说明：" style="margin-left: 100px">
            <el-input v-model="form.explains" autocomplete="off" placeholder="请输入活动说明" style="width: 270px"></el-input>
          </el-form-item>
          <el-form-item label="开始时间：" style="margin-left: 100px">
            <div>
              <!-- <span class="demonstration">默认</span> -->
              <el-date-picker
                style="width:200px; display:inline-block"
                v-model="form.beginTime"
                type="datetime"
                placeholder="选择活动开始时间">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间：" style="margin-left: 100px">
            <div>
              <!-- <span class="demonstration">默认</span> -->
              <el-date-picker
              style="width:200px; display:inline-block"
                v-model="form.endTime"
                type="datetime"
                placeholder="选择活动结束时间">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="优惠程度：" style="margin-left: 100px">
            <el-select v-model="form.proportion" placeholder="请选择优惠程度" style="width: 30%">
              <el-option v-for="item in proportions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用：" style="margin-left: 100px">
            <el-select v-model="form.status" placeholder="请选择是否启用" style="width: 30%">
              <el-option v-for="item in types" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细说明：" style="margin-left: 100px">
            <el-input style="width:400px" type="textarea" :rows="4" placeholder="请输入活动详细说明...." v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="margin-top:-20px">
          <el-button @click="cancel"><span style="font-size:17px">取 消</span></el-button>
          <el-button type="primary" @click="submitForm"><span style="font-size:17px">确 定</span></el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Discounts",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 9,
      name: "",
      code: "",
      dialogFormVisible: false,
      multipleSelection: [],
      form: {},
      isEdit: false,
      types: ["是", "否"],
      proportions: ["一折", "二折","三折", "四折","五折", "六折","七折", "八折","九折",],
      Height: '',
      value2: '',
      isChangeStatus: false,
    };
  },
  created() {
    this.getHeight();
    this.load();
  },
  methods: {
    load() {
      this.request
        .get("/discounts/page", {
          params: {
            name: this.name,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          console.log("res", res);
          console.log("res.records", res.data.records);
          console.log("res.total", res.total);
          this.tableData = res.data.records;
          console.log('日期',this.tableData);
          this.total = res.data.records.length;
        });
    },
    getHeight(){
      //获取屏幕高度
      let screenHeight = document.documentElement.clientHeight - 238 + "px";
      this.$nextTick(() => {
      this.Height = screenHeight;
      })
    },
    submitForm(){
      this.request.put('/discounts/editDiscounts',this.form).then(res =>{
        if(res.code === '200'){
          if(row.status === true){
            this.$notify.success('开启活动成功！')
          }else{
            this.$notify.success('关闭活动成功！')
          }
          this.load();
        }
      })
    },
    changeStatus(row){
      console.log('快吃饭啦',row.status);
      this.request.put('/discounts/editDiscounts',row).then(res =>{
        if(res.code === '200'){
          if(row.status === true){
            this.$notify.success('开启活动成功！')
          }else{
            this.$notify.success('关闭活动成功！')
          }
          this.load();
        }
      })
    },
    back() {
      this.showContent = false;
    },
    addDiscounts() {
      this.form.status === '是' ? this.form.status = 1 : this.form.status = 0
      console.log("嘿嘿嘿", this.form);
      this.request.post('/discounts/addDiscounts',this.form).then(res=>{
        if(res.code === '200'){
          this.$notify.success('添加活动成功!')
          this.load()
        }else{
          this.$notify.success('添加活动失败!')
          this.load()
        }
        this.dialogFormVisible = false;
      })
      // this.request.post("/notice/add", this.form).then((res) => {
      //   console.log("嘻嘻嘻", res);
      //   if (res.code === "200") {
      //     if (this.isEdit === false) {
      //       this.$message.success("添加公告成功!");
      //       this.load();
      //     } else {
      //       this.$message.success("修改公告成功!");
      //       this.load();
      //     }
      //     this.dialogFormVisible = false;
      //   } else {
      //     this.$message.success("添加公告失败!");
      //   }
      // });
    },
    editDiscounts(){
      this.request.put('/discounts/editDiscounts',this.form).then(res =>{
        if(res.code === '200'){
          this.$notify.success('修改活动成功!')
        }else{
          this.$notify.success('修改活动失败!')
        }
        this.dialogFormVisible = false;
        this.load();
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    reset() {
      (this.name = ""), (this.code = ""), this.load();
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    handleEdit(row) {
      console.log("row", row);
      this.form = Object.assign({}, row);
      this.form.status === true ? this.form.status = '是' : this.form.status = '否'
      this.dialogFormVisible = true;
      this.isEdit = true;
    },
    handleDel(id) {
      console.log("id", id);
      this.request.delete("/discounts/delDiscountById/" + id).then((res) => {
        if (res) {
          this.$message.success("删除鲜花套餐成功!");
          this.load();
        } else {
          this.$message.error("删除鲜花套餐失败!");
          this.load();
        }
      });
    },
    handleDeleteBatch() {
      let ids = this.multipleSelection.map((v) => v.id);
      console.log("ids", ids);
      if (ids.length === 0) {
        this.$message.warning("批量删除前,请先勾选若干活动");
      } else {
        this.request
          .delete("/discounts/deleteBatch/", { data: ids })
          .then((res) => {
            if (res.code === "200") {
              this.$message.success("批量删除活动成功!");
              this.load();
            } else {
              this.$message.error("批量删除活动失败!");
              this.load();
            }
          });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitForm() {
      if (this.isEdit === false) {
        console.log("add");
        this.form.status === '是' ? this.form.status = 1 : this.form.status = 0
        this.request.post("/discounts/addDiscounts", this.form).then((res) => {
          if (res) {
            this.$notify.success("添加活动成功!");
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$notify.error("添加活动失败!");
            this.dialogFormVisible = false;
            this.load();
          }
        });
      } else {
        console.log("edit");
        this.form.status === '是' ? this.form.status = 1 : this.form.status = 0
        this.request.put("/discounts/editDiscounts", this.form).then((res) => {
          if (res) {
            this.$notify.success("修改活动信息成功!");
            this.dialogFormVisible = false;
            this.isEdit = false;
            this.load();
          } else {
            this.$notify.error("修改活动信息失败!");
            this.dialogFormVisible = false;
            this.isEdit = false;
            this.load();
          }
        });
      }
    },
    cancel() {
      this.dialogFormVisible = false;
      this.load();
    },
    exp() {
      window.open("http://8.138.58.18:7777/discounts/export");
    },
  },
};
</script>

<style>
.headerBg77 {
  background-color: rgb(152, 238, 171) !important;
}
.detailHeadline{
  font-size: 22px;
  font-weight: 600;
}
</style>